@workerdeck/ui 0.11.0 → 0.13.0

package/build/{SessionPanel-_U8tjX29.mjs → SessionPanel-CKQa4i0Y.mjs}

@@ -134,7 +134,7 @@ const SelectContent = ({ className, align = "start", alignItemWithTrigger = fals
 	alignItemWithTrigger,
 	side,
 	sideOffset,
-	className: "isolate z-60 outline-none",
+	className: "isolate z-80 outline-none",
 	children: /* @__PURE__ */ jsx(Select.Popup, {
 		"data-slot": "select-content",
 		className: cn("max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", "rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", className),
@@ -161,7 +161,7 @@ const MenuContent = ({ className, align = "end", side = "bottom", sideOffset = 6
 	align,
 	side,
 	sideOffset,
-	className: "isolate z-60 outline-none",
+	className: "isolate z-80 outline-none",
 	children: /* @__PURE__ */ jsx(Menu.Popup, {
 		"data-slot": "menu-content",
 		className: cn("min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
@@ -239,7 +239,7 @@ const TooltipProvider = Tooltip.Provider;
 const TooltipContent = ({ className, side = "top", sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 	side,
 	sideOffset,
-	className: "isolate z-60",
+	className: "isolate z-90",
 	children: /* @__PURE__ */ jsx(Tooltip.Popup, {
 		"data-slot": "tooltip-content",
 		className: cn("rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none", className),
@@ -4280,6 +4280,78 @@ function hashtagTrigger(opts = {}) {
 	};
 }
 //#endregion
+//#region src/components/agent/transcript-variant.tsx
+const VariantContext = createContext("cards");
+function TranscriptVariantProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(VariantContext.Provider, {
+		value,
+		children
+	});
+}
+function useTranscriptVariant() {
+	return useContext(VariantContext);
+}
+/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
+function useLines() {
+	return useTranscriptVariant() === "lines";
+}
+const DensityContext = createContext("comfortable");
+function TranscriptDensityProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(DensityContext.Provider, {
+		value,
+		children
+	});
+}
+function useTranscriptDensity() {
+	return useContext(DensityContext);
+}
+/**
+* The gap between two rows, per variant and density — the whole of the density
+* feature, since it is the only vertical spacing between rows that exists.
+*
+* `className` goes on the **measured** wrapper (see `Transcript`), so the gap is
+* part of each row's measured height and no pixel constant is load-bearing.
+* `px` is fed to `estimateSize` alone, where being approximate is the contract:
+* it sets the scrollbar's length before rows mount and is replaced by a real
+* measurement the moment one does.
+*
+* `lines` + `compact` is the only combination with no gap at all: there the
+* row's own `py-0.5` is the entire separation, which is what makes it compact.
+*/
+const ROW_GAP = {
+	cards: {
+		comfortable: {
+			className: "pt-4",
+			px: 16
+		},
+		compact: {
+			className: "pt-2",
+			px: 8
+		}
+	},
+	lines: {
+		comfortable: {
+			className: "pt-4",
+			px: 16
+		},
+		compact: { px: 0 }
+	}
+};
+/**
+* The left gutter of a line item: one glyph, fixed width, so every row's text
+* starts on the same column no matter which kind of event it is. Decorative —
+* the row's own text says what it is.
+*/
+function LineGlyph({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
+		children
+	});
+}
+/** Body text metrics for a line item — tighter than the card variant's. */
+const LINE_TEXT = "text-body-sm leading-5";
+//#endregion
 //#region src/components/agent/Composer.tsx
 /** CLI names may carry display annotations (e.g. "foo (MCP)") the parser rejects. */
 const cleanName = (name) => name.replace(/\s*\(MCP\)$/i, "");
@@ -4332,6 +4404,7 @@ function matchScore(query, haystacks) {
 */
 function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, onSearchFiles, attachments, toolbar, layout = "stacked", className, ref }) {
 	const inline = layout === "inline";
+	const lines = useLines();
 	const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState();
 	const fileInput = useRef(null);
 	const [dragging, setDragging] = useState(false);
@@ -4509,7 +4582,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 				setDragging(false);
 				pick(e.dataTransfer.files);
 			},
-			className: cn("mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)", "transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", dragging && "border-ring ring-2 ring-ring/30", disabled && "opacity-60"),
+			className: cn("mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden border border-border bg-bg", "transition-colors", lines ? "rounded-sm focus-within:border-accent" : cn("rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"), dragging && (lines ? "border-accent" : "border-ring ring-2 ring-ring/30"), disabled && "opacity-60"),
 			children: [staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null, inline ? /* @__PURE__ */ jsxs("div", {
 				className: "flex items-end gap-1 p-1",
 				children: [
@@ -4562,11 +4635,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
 				})
 			]
-		}) : /* @__PURE__ */ jsx("div", {
-			"data-slot": "composer-hint",
-			className: "mx-auto mt-1 w-full max-w-[var(--wd-content-max-w,48rem)] text-center text-label text-fg-4",
-			children: "Enter to send · Shift+Enter for a new line"
-		})]
+		}) : null]
 	});
 }
 /**
@@ -5557,36 +5626,6 @@ function isMutatingTool(toolName) {
 	}
 }
 //#endregion
-//#region src/components/agent/transcript-variant.tsx
-const VariantContext = createContext("cards");
-function TranscriptVariantProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(VariantContext.Provider, {
-		value,
-		children
-	});
-}
-function useTranscriptVariant() {
-	return useContext(VariantContext);
-}
-/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
-function useLines() {
-	return useTranscriptVariant() === "lines";
-}
-/**
-* The left gutter of a line item: one glyph, fixed width, so every row's text
-* starts on the same column no matter which kind of event it is. Decorative —
-* the row's own text says what it is.
-*/
-function LineGlyph({ children, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
-		children
-	});
-}
-/** Body text metrics for a line item — tighter than the card variant's. */
-const LINE_TEXT = "text-body-sm leading-5";
-//#endregion
 //#region src/components/agent/Response.tsx
 /**
 * Markdown on a terminal's grid.
@@ -5759,7 +5798,7 @@ function LineOptionList({ options, focused, onFocus, onChoose, active = true, la
 					className: cn("flex w-full items-baseline gap-2 text-left outline-none", isFocused ? "bg-surface-hover" : "hover:bg-surface-hover/60"),
 					children: [
 						/* @__PURE__ */ jsx(LineGlyph, {
-							className: isFocused ? "text-accent" : void 0,
+							className: isFocused ? "text-fg-1" : void 0,
 							children: isFocused ? "❯" : " "
 						}),
 						/* @__PURE__ */ jsx("span", {
@@ -5799,7 +5838,7 @@ function LineInput({ value, onChange, onSubmit, onCancel, placeholder }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-baseline gap-2",
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
+			className: "text-fg-3",
 			children: "›"
 		}), /* @__PURE__ */ jsx("input", {
 			autoFocus: true,
@@ -6217,7 +6256,7 @@ function QuestionPrompt({ request, onAnswer, onDismiss, className }) {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-baseline gap-2",
 							children: [/* @__PURE__ */ jsx(LineGlyph, {
-								className: "text-info",
+								className: "text-fg-3",
 								children: "?"
 							}), /* @__PURE__ */ jsxs("span", {
 								className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-1",
@@ -6666,7 +6705,7 @@ function Slot({ onClick, hint, children }) {
 		children
 	});
 }
-function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, className }) {
+function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, placement = "top", className }) {
 	const meta = STATUS_META[state.status];
 	const now = useNow();
 	const session = state.rateLimits?.five_hour;
@@ -6674,7 +6713,7 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
 	const link = connection ?? (connected === false ? "reconnecting" : "live");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "status-bar",
-		className: cn("flex items-center gap-2 border-b border-border bg-surface px-3 py-1.5", className),
+		className: cn("flex items-center gap-2 border-border bg-surface px-3 py-1.5", placement === "bottom" ? "border-t" : "border-b", className),
 		children: [
 			/* @__PURE__ */ jsx(Slot, {
 				onClick: onOpenStatus,
@@ -6818,27 +6857,68 @@ function FileCard({ item, href, className }) {
 	});
 }
 //#endregion
-//#region src/components/agent/Loader.tsx
+//#region src/components/agent/pulse.tsx
 /**
-* The frames of the working marker, and the rate they turn over.
+* The brand mark's pulse, as characters — the working marker every surface in the
+* transcript animates.
 *
-* A four-pointed star growing and shrinking — it reads as *activity* at a glance
-* without any of the pixel-fitting a braille or block spinner needs, and it is
-* the same shape a terminal agent uses because a terminal is where this
-* vocabulary comes from. ~8fps: fast enough to be alive, slow enough not to
-* strobe next to streaming text.
+* These are the mark's own four states (`docs/assets/BRAND.md`, "The loading
+* state"): a dot, an outline, a semi and a full diamond, built in the SVG from
+* two shapes rather than four drawings. 150ms each, so one cycle is the 0.6s
+* clock the marker pulses on in `icon-loading.svg` — the same rhythm, in the
+* medium a transcript row actually has.
+*
+* BRAND.md's caveat applies and is satisfied here: `U+25C6/7/8` are East-Asian
+* *ambiguous width*, so they can render double-width in a terminal under an
+* East-Asian locale and shift every line with them. They are safe wherever the
+* glyph is centred in a fixed-width box, which is what `LineGlyph` is. Anything
+* writing to a real terminal must use the ASCII set instead.
 */
-const FRAMES = [
-	"✢",
-	"✳",
-	"✶",
-	"✻",
-	"✽",
-	"✻",
-	"✶",
-	"✳"
+const PULSE_FRAMES = [
+	"⋄",
+	"◇",
+	"◈",
+	"◆"
 ];
-const FRAME_MS = 120;
+/**
+* The resting state. Stopping the animation lands on the complete mark rather
+* than on a half-drawn frame — the same property that makes the SVG's
+* `prefers-reduced-motion` free (see BRAND.md: `translateY(0)` *is* the mark).
+*/
+const PULSE_REST = PULSE_FRAMES[PULSE_FRAMES.length - 1];
+/** The OS-level "stop moving things" setting. A spinner is decoration — the word
+* beside it carries the meaning — so honouring this costs nothing. */
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!query) return;
+		setReduced(query.matches);
+		const onChange = () => setReduced(query.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+/**
+* The current pulse frame, ticking while `animated`. Callers mount this only
+* while something is actually in flight, so nothing here runs on an idle
+* session; with reduced motion, or when not animating, it holds at rest.
+*/
+function usePulse(animated) {
+	const reduced = usePrefersReducedMotion();
+	const running = animated && !reduced;
+	const [frame, setFrame] = useState(0);
+	useEffect(() => {
+		if (!running) return;
+		const timer = setInterval(() => setFrame((f) => f + 1), 150);
+		return () => clearInterval(timer);
+	}, [running]);
+	if (!running) return PULSE_REST;
+	return PULSE_FRAMES[frame % PULSE_FRAMES.length];
+}
+//#endregion
+//#region src/components/agent/Loader.tsx
 /**
 * What it says it is doing while it hasn't said anything yet. Cycled on a slow
 * clock so a long turn doesn't sit under one frozen word — a still label reads
@@ -6859,42 +6939,17 @@ const VERBS = [
 	"Noodling"
 ];
 const VERB_MS = 4e3;
-/** Ticks while mounted, at the spinner's rate. Mounted only while a turn is in
-* flight, so nothing here runs on an idle session. */
-function useFrames(animated) {
-	const [frame, setFrame] = useState(0);
-	useEffect(() => {
-		if (!animated) return;
-		const timer = setInterval(() => setFrame((f) => f + 1), FRAME_MS);
-		return () => clearInterval(timer);
-	}, [animated]);
-	return frame;
-}
-/** The OS-level "stop moving things" setting. A spinner is decoration; the word
-* beside it carries the meaning, so honouring this costs nothing. */
-function usePrefersReducedMotion() {
-	const [reduced, setReduced] = useState(false);
-	useEffect(() => {
-		const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
-		if (!query) return;
-		setReduced(query.matches);
-		const onChange = () => setReduced(query.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, []);
-	return reduced;
-}
 /**
 * "The agent is working and hasn't produced output yet."
 *
-* `lines`: a terminal working line — animated glyph in the gutter, a verb, and
-* the readings that answer "should I still be waiting?" in one parenthesis.
-* `cards`: the three-dot pulse, unchanged.
+* `lines`: a terminal working line — the mark's own pulse in the gutter (see
+* `pulse.tsx`), a verb, and the readings that answer "should I still be
+* waiting?" in one parenthesis. `cards`: the three-dot pulse, unchanged — the
+* dashboard's loader is not a gutter glyph and has no column to pulse in.
 */
 function Loader({ label, startedAt, tokens, className }) {
 	const lines = useLines();
-	const reducedMotion = usePrefersReducedMotion();
-	const frame = useFrames(lines && !reducedMotion);
+	const pulse = usePulse(lines);
 	if (!lines) return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "loader",
 		className: cn("flex items-center gap-2 py-1 text-body-sm text-fg-4", className),
@@ -6917,8 +6972,8 @@ function Loader({ label, startedAt, tokens, className }) {
 		"data-slot": "loader",
 		className: cn("flex items-baseline gap-2", className),
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
-			children: FRAMES[frame % FRAMES.length]
+			className: lines ? "text-fg-3" : "text-accent",
+			children: pulse
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-3",
 			children: [
@@ -6942,9 +6997,12 @@ function Loader({ label, startedAt, tokens, className }) {
 /**
 * One chat turn row.
 *
-* `cards`: user messages sit right in a bubble; assistant content is flat,
-* full-width (the AI-chat convention — assistant output is the page, user input
-* is quoted).
+* `cards`: user messages sit in a bubble, assistant content is flat and
+* full-width. Both are **left-aligned**: the transcript is a log read top to
+* bottom, and an editor-shaped host (a full-width session view beside a sessions
+* rail) has no right edge to anchor to — a bubble drifting right in a 1600px
+* column separates a prompt from the reply it produced. The bubble alone is
+* enough to say who spoke.
 *
 * `lines`: both are left-aligned full-width line items behind a gutter glyph —
 * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
@@ -6956,10 +7014,10 @@ function Message({ from, className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message",
 		"data-from": from,
-		className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") : cn("flex-col gap-1", from === "user" ? "items-end" : "items-start"), className),
+		className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") : "flex-col items-start gap-1", className),
 		...props,
 		children: lines ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: from === "user" ? "text-accent" : "text-fg-3",
+			className: from === "user" ? "text-fg-2" : "text-fg-3",
 			children: from === "user" ? "❯" : "●"
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex min-w-0 flex-1 flex-col gap-1",
@@ -6970,7 +7028,7 @@ function Message({ from, className, children, ...props }) {
 function MessageContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-content",
-		className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-br-sm", "in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2", "in-data-[from=user]:whitespace-pre-wrap", "in-data-[from=assistant]:w-full"), className),
+		className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-sm", "in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2", "in-data-[from=user]:whitespace-pre-wrap", "in-data-[from=assistant]:w-full"), className),
 		...props
 	});
 }
@@ -7229,6 +7287,7 @@ function ToolCallCard({ item, hostImage, className }) {
 	const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 	const badge = STATE_BADGE[status];
 	const isError = status === "failed" || item.result?.isError === true;
+	const pulse = usePulse(lines && badge.busy);
 	const Icon = toolIcon(item.name);
 	const resultText = item.result?.text ?? "";
 	const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS;
@@ -7284,7 +7343,7 @@ function ToolCallCard({ item, hostImage, className }) {
 				children: [
 					/* @__PURE__ */ jsx(LineGlyph, {
 						className: status === "settled" && !isError && isMutatingTool(item.name) ? "text-success" : STATE_GLYPH[status],
-						children: badge.busy ? "◐" : "●"
+						children: badge.busy ? pulse : "●"
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1 truncate text-body-sm leading-5 text-fg-3",
@@ -7304,7 +7363,6 @@ function ToolCallCard({ item, hostImage, className }) {
 						className: "shrink-0 text-label text-fg-4",
 						children: item.backend
 					}) : null,
-					badge.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 shrink-0 self-center text-fg-4" }) : null,
 					status === "deferred" ? /* @__PURE__ */ jsx(Clock, { className: "size-3 shrink-0 self-center text-fg-4" }) : null,
 					isError && !badge.busy ? /* @__PURE__ */ jsx("span", {
 						className: "shrink-0 text-label text-danger",
@@ -7556,7 +7614,7 @@ function RecapRow({ line, since }) {
 		"data-slot": "recap",
 		className: "flex items-baseline gap-2 py-0.5",
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
+			className: "text-fg-3",
 			children: "※"
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1 text-label leading-5 text-fg-3",
@@ -7652,7 +7710,7 @@ function showLoader(state) {
 * References only — the bytes are fetched from the gateway. */
 function SentAttachments({ attachments, attachmentUrl }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mb-1 flex flex-wrap gap-1.5", useLines() ? "justify-start" : "justify-end"),
+		className: "mb-1 flex flex-wrap justify-start gap-1.5",
 		children: attachments.map((attachment) => {
 			const href = attachmentUrl?.(attachment.id);
 			return attachment.mediaType.startsWith("image/") && href ? /* @__PURE__ */ jsx("img", {
@@ -7707,7 +7765,7 @@ function nestedClass(item, lines) {
 * transient UI state (an expanded tool card, an opened reasoning block) resets
 * once the row scrolls far enough away to unmount.
 */
-function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl, hostImage, jumpToRecapRef }) {
+function TranscriptRows({ rows, boundary, since, lines, gap, fileUrl, attachmentUrl, hostImage, jumpToRecapRef }) {
 	const stick = useStickToBottomContext();
 	const [scrollElement, setScrollElement] = useState(null);
 	useEffect(() => {
@@ -7719,7 +7777,7 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 			if (scrollElement && virtualizer.scrollElement !== scrollElement) virtualizer.scrollOffset = scrollElement.scrollTop;
 			return scrollElement;
 		},
-		estimateSize: () => lines ? 32 : 100,
+		estimateSize: () => (lines ? 32 : 100) + gap.px,
 		overscan: 8,
 		getItemKey: (index) => rows[index].key,
 		useFlushSync: true
@@ -7769,7 +7827,7 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 			return /* @__PURE__ */ jsx("div", {
 				ref: virtualizer.measureElement,
 				"data-index": virtualRow.index,
-				className: cn("absolute inset-x-0 top-0", !lines && virtualRow.index > 0 && "pt-4"),
+				className: cn("absolute inset-x-0 top-0", virtualRow.index > 0 && gap.className),
 				style: { transform: `translateY(${virtualRow.start}px)` },
 				children: "item" in row ? /* @__PURE__ */ jsx("div", {
 					className: cn(lines && "-mx-1 rounded-sm px-1 py-0.5 transition-colors hover:bg-surface-hover", boundary !== void 0 && row.index < boundary && "opacity-45", nestedClass(row.item, lines)),
@@ -7787,8 +7845,9 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 		})
 	});
 }
-function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", catchUp, jumpToRecapRef, className }) {
+function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", density = "comfortable", catchUp, jumpToRecapRef, className }) {
 	const lines = variant === "lines";
+	const gap = ROW_GAP[variant][density];
 	const runStartedAt = useRunStart(state.status);
 	const following = useSettled(state.items.length, state.status);
 	const boundary = catchUp && catchUp.from > 0 && catchUp.from < state.items.length ? catchUp.from : void 0;
@@ -7829,6 +7888,7 @@ function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage,
 					boundary,
 					since: catchUp?.since,
 					lines,
+					gap,
 					fileUrl,
 					attachmentUrl,
 					hostImage,
@@ -7992,7 +8052,7 @@ const INTERACTIVE = [
 * the engine name — an absent capability hides the control instead of offering
 * one that can only fail.
 */
-function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", onOpenPanel, onVitals, transcriptVariant = "cards", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, className }) {
 	const external = panelSurface === "external";
 	const statusExternal = statusSurface === "external";
 	const controlsExternal = controlsSurface === "external";
@@ -8068,7 +8128,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const controls = useRef({
 		setModel: (model) => setters.current.setModel(model),
 		setPermissionMode: (mode) => setters.current.setPermissionMode(mode),
-		interrupt: () => setters.current.interrupt()
+		interrupt: () => setters.current.interrupt(),
+		focusComposer: () => composerRef.current?.focus()
 	});
 	useEffect(() => {
 		const handler = onControlsRef.current;
@@ -8143,176 +8204,183 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	] })] });
 	const menu = external ? null : actionsMenu;
 	const headerTakesActions = typeof header === "function";
+	const statusBar = statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
+		state,
+		connection,
+		placement: statusPlacement,
+		onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
+		onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
+		onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
+		actions: headerTakesActions ? void 0 : menu
+	});
 	const handleClick = (event) => {
-		if (!focusComposerOnClick) return;
+		if (!focusComposerOnClick || readOnly) return;
 		if (event.target?.closest(INTERACTIVE)) return;
 		if (window.getSelection()?.isCollapsed === false) return;
 		composerRef.current?.focus();
 	};
 	return /* @__PURE__ */ jsx(TranscriptVariantProvider, {
 		value: transcriptVariant,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-slot": "session-panel",
-			onClick: handleClick,
-			className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
-			children: [
-				headerTakesActions ? header({ actions: menu }) : header,
-				statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
-					state,
-					connection,
-					onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
-					onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
-					onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
-					actions: headerTakesActions ? void 0 : menu
-				}),
-				protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
-					level: "warning",
-					children: [
-						"Server speaks protocol v",
-						protocolMismatch,
-						", this build renders v",
-						PROTOCOL_VERSION,
-						". Some events may not render."
-					]
-				}) : null,
-				protocolError ? /* @__PURE__ */ jsx(Notice, {
-					level: "error",
-					onDismiss: () => setProtocolError(void 0),
-					children: protocolError
-				}) : null,
-				/* @__PURE__ */ jsx(Transcript, {
-					state,
-					fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
-					attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
-					canBrowseFiles: hostFiles.available,
-					hostImage,
-					variant: transcriptVariant,
-					catchUp: catchUp && newCount > 0 ? {
-						from: catchUp.itemCount,
-						since: catchUp.since
-					} : void 0,
-					jumpToRecapRef: jumpToRecap
-				}),
-				catchUp && newCount > 0 ? /* @__PURE__ */ jsx("div", {
-					className: "px-3 pb-1",
-					children: /* @__PURE__ */ jsxs("div", {
-						"data-slot": "catch-up",
-						className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
+		children: /* @__PURE__ */ jsx(TranscriptDensityProvider, {
+			value: transcriptDensity,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "session-panel",
+				onClick: handleClick,
+				className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
+				children: [
+					headerTakesActions ? header({ actions: menu }) : header,
+					statusPlacement === "top" ? statusBar : null,
+					protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
+						level: "warning",
 						children: [
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "select-none text-accent",
-								children: "※"
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "min-w-0 flex-1 truncate",
-								children: [
-									newCount,
-									" new ",
-									newCount === 1 ? "row" : "rows",
-									catchUp.since !== void 0 ? ` since you were last here` : ""
-								]
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => jumpToRecap.current?.(),
-								className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-								children: "jump"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => setCaughtUp(true),
-								className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-								children: "dismiss"
-							})
+							"Server speaks protocol v",
+							protocolMismatch,
+							", this build renders v",
+							PROTOCOL_VERSION,
+							". Some events may not render."
 						]
-					})
-				}) : null,
-				capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
-					className: "px-3 pb-2",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2",
-						children: state.pendingApprovals.map((request) => request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0 ? /* @__PURE__ */ jsx(QuestionPrompt, {
-							request,
-							onAnswer: approve,
-							onDismiss: (id) => deny(id, "Question dismissed by user")
-						}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
-							request,
-							onApprove: approve,
-							onDeny: deny
-						}, request.id))
-					})
-				}) : null,
-				/* @__PURE__ */ jsx(Composer, {
-					ref: composerRef,
-					onSend: handleSend,
-					onInterrupt: interrupt,
-					busy,
-					disabled: ended || !sessionId,
-					commands: capabilities.slashCommands ? commands : void 0,
-					skills: capabilities.skillsList ? state.skills : void 0,
-					attachments,
-					onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
-						...options,
-						limit: 8
-					}) : void 0,
-					layout: controlsExternal ? "inline" : "stacked",
-					toolbar: controlsExternal ? void 0 : /* @__PURE__ */ jsxs(Fragment$1, { children: [models.length ? /* @__PURE__ */ jsx(ModelSelect, {
-						models,
-						model: effectiveModel,
-						onModelChange: setModel,
-						disabled: ended
-					}) : null, state.permissionMode ? /* @__PURE__ */ jsx(PermissionModeSelect, {
-						mode: state.permissionMode,
-						onModeChange: setPermissionMode,
-						modes: capabilities.permissionModes,
-						canBypass: state.session?.canBypassPermissions,
-						disabled: ended
-					}) : null] })
-				}),
-				!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(SessionInfoDialog, {
+					}) : null,
+					protocolError ? /* @__PURE__ */ jsx(Notice, {
+						level: "error",
+						onDismiss: () => setProtocolError(void 0),
+						children: protocolError
+					}) : null,
+					/* @__PURE__ */ jsx(Transcript, {
 						state,
-						client,
-						sessionId,
-						open: panel === "info",
-						onOpenChange: (next) => setPanel(next ? "info" : void 0)
+						fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
+						attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
+						canBrowseFiles: hostFiles.available,
+						hostImage,
+						variant: transcriptVariant,
+						density: transcriptDensity,
+						catchUp: catchUp && newCount > 0 ? {
+							from: catchUp.itemCount,
+							since: catchUp.since
+						} : void 0,
+						jumpToRecapRef: jumpToRecap
 					}),
-					/* @__PURE__ */ jsx(ContextDialog, {
-						usage: state.contextUsage,
-						open: panel === "context",
-						onOpenChange: (next) => setPanel(next ? "context" : void 0)
-					}),
-					/* @__PURE__ */ jsx(UsageDialog, {
-						rateLimits: windows,
-						subscriptionType: state.subscriptionType,
-						engine: state.engine ?? "claude",
-						totalCostUsd: state.totalCostUsd,
-						updatedAt: state.rateLimitsUpdatedAt,
-						open: panel === "usage",
-						onOpenChange: (next) => setPanel(next ? "usage" : void 0)
-					}),
-					/* @__PURE__ */ jsx(McpDialog, {
-						client,
-						sessionId,
-						canManageServers: capabilities.mcpServerActions,
-						open: panel === "mcp",
-						onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
-					}),
-					/* @__PURE__ */ jsx(SkillsDialog, {
-						skills: state.skills,
-						open: panel === "skills",
-						onOpenChange: (next) => setPanel(next ? "skills" : void 0),
-						onUse: (skill) => composerRef.current?.insertText(skillPrompt(skill))
+					catchUp && newCount > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-1",
+						children: /* @__PURE__ */ jsxs("div", {
+							"data-slot": "catch-up",
+							className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: cn("select-none", transcriptVariant === "lines" ? "text-fg-3" : "text-accent"),
+									children: "※"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: [
+										newCount,
+										" new ",
+										newCount === 1 ? "row" : "rows",
+										catchUp.since !== void 0 ? ` since you were last here` : ""
+									]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => jumpToRecap.current?.(),
+									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+									children: "jump"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => setCaughtUp(true),
+									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+									children: "dismiss"
+								})
+							]
+						})
+					}) : null,
+					!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-2",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2",
+							children: state.pendingApprovals.map((request) => request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0 ? /* @__PURE__ */ jsx(QuestionPrompt, {
+								request,
+								onAnswer: approve,
+								onDismiss: (id) => deny(id, "Question dismissed by user")
+							}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
+								request,
+								onApprove: approve,
+								onDeny: deny
+							}, request.id))
+						})
+					}) : null,
+					readOnly ? null : /* @__PURE__ */ jsx(Composer, {
+						ref: composerRef,
+						onSend: handleSend,
+						onInterrupt: interrupt,
+						busy,
+						disabled: ended || !sessionId,
+						commands: capabilities.slashCommands ? commands : void 0,
+						skills: capabilities.skillsList ? state.skills : void 0,
+						attachments,
+						onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
+							...options,
+							limit: 8
+						}) : void 0,
+						layout: controlsExternal ? "inline" : "stacked",
+						toolbar: controlsExternal ? void 0 : /* @__PURE__ */ jsxs(Fragment$1, { children: [models.length ? /* @__PURE__ */ jsx(ModelSelect, {
+							models,
+							model: effectiveModel,
+							onModelChange: setModel,
+							disabled: ended
+						}) : null, state.permissionMode ? /* @__PURE__ */ jsx(PermissionModeSelect, {
+							mode: state.permissionMode,
+							onModeChange: setPermissionMode,
+							modes: capabilities.permissionModes,
+							canBypass: state.session?.canBypassPermissions,
+							disabled: ended
+						}) : null] })
 					}),
-					/* @__PURE__ */ jsx(HostFilesDialog, {
-						client,
-						cwd: state.cwd,
-						open: panel === "files",
-						onOpenChange: (next) => setPanel(next ? "files" : void 0)
-					})
-				] }) : null
-			]
+					statusPlacement === "bottom" ? statusBar : null,
+					!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(SessionInfoDialog, {
+							state,
+							client,
+							sessionId,
+							open: panel === "info",
+							onOpenChange: (next) => setPanel(next ? "info" : void 0)
+						}),
+						/* @__PURE__ */ jsx(ContextDialog, {
+							usage: state.contextUsage,
+							open: panel === "context",
+							onOpenChange: (next) => setPanel(next ? "context" : void 0)
+						}),
+						/* @__PURE__ */ jsx(UsageDialog, {
+							rateLimits: windows,
+							subscriptionType: state.subscriptionType,
+							engine: state.engine ?? "claude",
+							totalCostUsd: state.totalCostUsd,
+							updatedAt: state.rateLimitsUpdatedAt,
+							open: panel === "usage",
+							onOpenChange: (next) => setPanel(next ? "usage" : void 0)
+						}),
+						/* @__PURE__ */ jsx(McpDialog, {
+							client,
+							sessionId,
+							canManageServers: capabilities.mcpServerActions,
+							open: panel === "mcp",
+							onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
+						}),
+						/* @__PURE__ */ jsx(SkillsDialog, {
+							skills: state.skills,
+							open: panel === "skills",
+							onOpenChange: (next) => setPanel(next ? "skills" : void 0),
+							onUse: (skill) => composerRef.current?.insertText(skillPrompt(skill))
+						}),
+						/* @__PURE__ */ jsx(HostFilesDialog, {
+							client,
+							cwd: state.cwd,
+							open: panel === "files",
+							onOpenChange: (next) => setPanel(next ? "files" : void 0)
+						})
+					] }) : null
+				]
+			})
 		})
 	});
 }
@@ -8404,6 +8472,6 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-export { TooltipProvider as $, permissionModeMeta as A, mentionTrigger as B, TranscriptVariantProvider as C, cn as Ct, PERMISSION_MODES as D, toolIcon as E, ContextDialog as F, ProgressRing as G, PromptArea as H, Composer as I, Spinner as J, Splitter as K, skillPrompt as L, SkillsDialog as M, McpDialog as N, PermissionModeSelect as O, HostFilesDialog as P, TooltipContent as Q, commandTrigger as R, Response as S, buttonVariants as St, isMutatingTool as T, plainTextToSegments as U, usePromptAreaState as V, segmentsToPlainText as W, copyText as X, CopyButton as Y, Tip as Z, SessionInfoDialog as _, SelectValue as _t, SessionEmptyState as a, DialogRow as at, parseUserQuestions as b, badgeVariants as bt, Message as c, MenuContent as ct, FileCard as d, MenuTrigger as dt, Dialog$1 as et, Conversation as f, Select$1 as ft, STATUS_META as g, SelectTrigger as gt, StatusBar as h, SelectItemText as ht, ToolCallCard as i, DialogHeader as it, ModelSelect as j, permissionModeChoices as k, MessageContent as l, MenuItem as lt, ConversationScrollButton as m, SelectItem as mt, UsageDialog as n, DialogClose as nt, Reasoning as o, DialogTrigger as ot, ConversationContent as p, SelectContent as pt, CodeBlock as q, Transcript as r, DialogContent as rt, PromptTokenText as s, Menu$1 as st, SessionPanel as t, DialogBody as tt, Loader as u, MenuSeparator as ut, QUESTION_BEHAVIORS as v, Input as vt, useTranscriptVariant as w, PermissionPrompt as x, Button as xt, QuestionPrompt as y, Badge as yt, hashtagTrigger as z };
+export { Tip as $, SkillsDialog as A, commandTrigger as B, isMutatingTool as C, Button as Ct, permissionModeChoices as D, PermissionModeSelect as E, skillPrompt as F, plainTextToSegments as G, mentionTrigger as H, TranscriptDensityProvider as I, Splitter as J, segmentsToPlainText as K, TranscriptVariantProvider as L, HostFilesDialog as M, ContextDialog as N, permissionModeMeta as O, Composer as P, copyText as Q, useTranscriptDensity as R, Response as S, badgeVariants as St, PERMISSION_MODES as T, cn as Tt, usePromptAreaState as U, hashtagTrigger as V, PromptArea as W, Spinner as X, CodeBlock as Y, CopyButton as Z, SessionInfoDialog as _, SelectItemText as _t, SessionEmptyState as a, DialogContent as at, parseUserQuestions as b, Input as bt, Message as c, DialogTrigger as ct, FileCard as d, MenuItem as dt, TooltipContent as et, Conversation as f, MenuSeparator as ft, STATUS_META as g, SelectItem as gt, StatusBar as h, SelectContent as ht, ToolCallCard as i, DialogClose as it, McpDialog as j, ModelSelect as k, MessageContent as l, Menu$1 as lt, ConversationScrollButton as m, Select$1 as mt, UsageDialog as n, Dialog$1 as nt, Reasoning as o, DialogHeader as ot, ConversationContent as p, MenuTrigger as pt, ProgressRing as q, Transcript as r, DialogBody as rt, PromptTokenText as s, DialogRow as st, SessionPanel as t, TooltipProvider as tt, Loader as u, MenuContent as ut, QUESTION_BEHAVIORS as v, SelectTrigger as vt, toolIcon as w, buttonVariants as wt, PermissionPrompt as x, Badge as xt, QuestionPrompt as y, SelectValue as yt, useTranscriptVariant as z };
 
-//# sourceMappingURL=SessionPanel-_U8tjX29.mjs.map
+//# sourceMappingURL=SessionPanel-CKQa4i0Y.mjs.map